<template>
  <div>
    <a-carousel arrows autoplay dots="false" :slides-to-show="4" :slides-to-scroll="1">
      <div v-for="(item,index) in deviceList" :key="'device'+index" class="device-item">
        <div class="device-item-inner" :class="{'bg01':index%3==0,'bg02':index%3==1,'bg03':index%3==2}">
          <div class="device-item-top">
            <div class="device-item-title">{{item.dicDisplayName}}</div>
            <div class="device-item-total">{{item.total}} <span style="font-size: '+nowSize(14)+'px">台</span></div>
          </div>
          <div class="device-item-bottom">
            <div class="device-item-status" v-for="(child,cIndex) in item.count" :key="'devicecount'+cIndex">
              <span class="device-item-dot" :class="{'dot-green':child.status==0,'dot-blue':child.status==1,'dot-red':child.status==2}"></span>
              <span class="device-item-status-label">{{child.statusValue}}</span>
              <span class="device-item-status-value">{{child.count}}台</span>
            </div>
          </div>
        </div>
      </div>
    </a-carousel>
    <div class="nodata" v-if="!deviceList.length">暂无数据</div>
  </div>
</template>
<script>
import {req} from "../../../api/axiosFun";

export default {
  data() {
    return{
      deviceList: [],
    }
  },
  created() {
    this.getEquipmentMonitor()
  },
  methods:{
    //设备监控
    getEquipmentMonitor() {
      req('post', `dataBoard/getEquipmentMonitor`)
        .then(res => {
          if (res.result === 'success') {
            var deviceList = []
            res.data.forEach(item=>{
              if(item.count.length){
                item.total = 0;
                item.count.forEach(child=>{
                  item.total += child.count
                })
                deviceList.push(item)
              }
            })
            this.deviceList = deviceList
          }
        })
    },
  }
}
</script>
<style scoped>
@import "../../../assets/css/maincss.css";
/deep/ .ant-carousel {
  height: 118px;
  overflow: hidden;
}
/deep/ .ant-carousel >>> .slick-slide{
  height: 118px;
}
/*设备监控*/
.device-item {
  padding: 6px;
  box-sizing: border-box;
}
.device-item-inner {
  padding: calc(100vw * 12 / 1920) calc(100vw * 15 / 1920) calc(100vw * 15 / 1920);;
  border-radius: 3px;
  height: 108px;
}
.device-item-top,.device-item-bottom {
  margin-top: 5px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.device-item-title {
  flex: 1;
  color: #333;
  font-size: 16px;
  font-weight: bold;
}
.device-item-total {
  color: #333;
  font-size: 18px;
}
.device-item-status {
  display: flex;
  align-items: center;
  width: 50%;
  font-size: 14px;
  line-height: 2;
}
.device-item-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}
.device-item-status-label {
  margin: 0 15px 0 5px;
  font-size: 14px;
}
.bg01{
  background: linear-gradient(to bottom,rgb(242,249,254),rgb(230,244,254));
}
.bg02{
  background: linear-gradient(to bottom,rgb(245,254,242),rgb(230,254,238));
}
.bg03{
  background: linear-gradient(to bottom,rgb(246,247,255),rgb(236,236,255));
}
@media screen and (max-width: 1440px) {
  .device-item-title,.device-item-status {
    font-size: 14px;
  }
  .device-item-total {
    font-size: 16px;
  }
  .device-item-status-label {
    font-size: 12px;
  }
}
</style>
